<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>queryUser</title>
<style>
	.a1{
		width: 600px;
		height: 460px;
/*		border: solid;*/
	}
	.a1 h3{
		margin: 0px;
		text-align: center;
	}
	.a2{
		width: 310px;
		height: 430px;
		display: inline-block;
/*		border: solid;*/
		border-right: solid;
	}
	.a3{
		width: 310px;
/*		height: 430px;*/
		display: inline-block;
/*		border: solid;*/
		border-right: solid;
	}
	.a4{
		display: inline-block;
		vertical-align: top;
/*		border-left: solid;*/
	}
</style>
</head>
<script>
	function showUserDetail(){
		document.getElementById("userDetail").style.display="inline";
	}
	function showBookDetail(){
		document.getElementById("bookDetail").style.display="inline-block";
	}
</script>
<body>
<div class="a1">
	<h3>查询用户</h3>
<div class="a2">
<div class="a3" style="border-bottom: solid">
<form>
	<table>
		<tr>
			<td colspan="2">定位用户(填写一个即可)</td>
		</tr>
		<tr>
			<td>姓名：</td>
			<td><input type="text" value="阿狸"></td>
		</tr>
		<tr>
			<td>学号：</td>
			<td><input type="text" value=""></td>
		</tr>
		<tr>
			<td>身份证号码：</td>
			<td><input type="text" value=""></td>
		</tr>
	<tr>
		<td><input type="reset" value="重填"></td>
		<td><input type="button" value="查询用户" name="query" onClick="showUserDetail()"></td>
	</tr>
	</table>
</form>
</div>
<div id="userDetail" style="display: none">
	<table>
		<tr>
			<td>姓名：</td>
			<td><input type="text" value="阿狸"></td>
		</tr>
		<tr>
			<td>学号：</td>
			<td><input type="text" value="2016070030444"></td>
		</tr>
		<tr>
			<td>身份证号码：</td>
			<td><input type="text" value="370811199909299999"></td>
		</tr>
		<tr>
			<td></td>
			<td><input type="button" value="查询借书情况" name="query" onClick="showBookDetail()"></td>
		</tr>
		<tr>
			<td colspan="2">--------------------------------------</td>
		</tr>
		<tr>
			<td>姓名：</td>
			<td><input type="text" value="阿狸"></td>
		</tr>
		<tr>
			<td>学号：</td>
			<td><input type="text" value="2018010010101"></td>
		</tr>
		<tr>
			<td>身份证号码：</td>
			<td><input type="text" value="370811199911111111"></td>
		</tr>
		<tr>
			<td></td>
			<td><input type="button" value="查询借书情况" name="query" onClick="showBookDetail()"></td>
		</tr>
		<tr>
			<td colspan="2">--------------------------------------</td>
		</tr>
	</table>
</div>	
</div>
<div id="bookDetail" class="a4" style="display: none">
<!--<div id="detailBook" style="display: none">-->
<table>
	<tr>
		<td>编号：</td>
		<td><input type="text" value="JN-0537"></td>
	</tr>
	<tr>
		<td>书名：</td>
		<td><input type="text" value="计算机操作系统(第四版)"></td>
	</tr>
	<tr>
		<td colspan="2">--------------------------------</td>
	</tr>
	<tr>
		<td>编号：</td>
		<td><input type="text" value="JN-8888"></td>
	</tr>
	<tr>
		<td>书名：</td>
		<td><input type="text" value="数据库系统概论(第五版)"></td>
	</tr>
	<tr>
		<td colspan="2">--------------------------------</td>
	</tr>
</table>
</div>
</div>
</body>
</html>
